<template>
  <div>
    <el-dialog v-bind="$attrs" :visible.sync="showDialog" v-on="$listeners" @open="onOpen" @close="onClose" title="添加用户">
      <el-row :gutter="15">
        <el-form ref="elForm" :model="user" :rules="rules" size="medium" label-width="100px">
          <el-col :span="24">
            <!-- 用户头像 -->
            <el-form-item label="用户头像">

              <!-- 头衔缩略图 -->
              <pan-thumb :image="image"/>
              <!-- 文件上传按钮 -->
              <el-button type="primary" icon="el-icon-upload" @click="imagecropperShow=true">更换头像
              </el-button>

              <!--
                v-show：是否显示上传组件
                :key：类似于id，如果一个页面多个图片上传控件，可以做区分
                :url：后台上传的url地址
                @close：关闭上传组件
                @crop-upload-success：上传成功后的回调 -->
              <image-cropper
                v-show="imagecropperShow"
                :width="300"
                :height="300"
                :key="imagecropperKey"
                :url="'/uploadImgFile'"
                field="file"
                @close="closeImage"
                @crop-upload-success="cropSuccess"/>

            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="用户名" prop="username">
              <el-input v-model="user.username" placeholder="请输入用户名" clearable :style="{width: '100%'}">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="部门" prop="departmentId">
              <el-select v-model="user.departmentId" placeholder="请选择部门" clearable
                         :style="{width: '100%'}">
                <el-option v-for="(item, index) in departments" :key="index"
                           :label="item.name"
                           :value="item.id" :disabled="item.disabled"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="昵称" prop="nickname">
              <el-input v-model="user.nickname" placeholder="请输入昵称" clearable :style="{width: '100%'}">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="性别" prop="sex">
              <el-radio-group v-model="user.sex" size="medium">
                <el-radio v-for="(item, index) in sexOptions" :key="index" :label="item.value"
                          :disabled="item.disabled">{{item.label}}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="密码" prop="password">
              <el-input v-model="user.password" placeholder="请输入密码" clearable show-password
                        :style="{width: '100%'}"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="邮箱" prop="email">
              <el-input v-model="user.email" placeholder="请输入邮箱" clearable :style="{width: '100%'}">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="手机号" prop="phoneNumber">
              <el-input v-model="user.phoneNumber" placeholder="请输入手机号" clearable
                        :style="{width: '100%'}"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="生日" prop="birth">
              <el-date-picker v-model="user.birth" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
                              :style="{width: '100%'}" placeholder="请选择生日" clearable></el-date-picker>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
      <div slot="footer">
        <el-button @click="close">取消</el-button>
        <el-button type="primary" @click="handelConfirm">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>

    import ImageCropper from '../../components/ImageCropper'
    import PanThumb from '../../components/PanThumb'
    import {deleteImgFile,saveUser} from "../../api/users";

    export default {
        inheritAttrs: false,
        components: {
            ImageCropper,
            PanThumb
        },
        props: {
            addOrUpdateVisible:{
                type: Boolean,
                default: false
            },
            departments: {
                type: Array,
                default: function () {
                    return []
                }
            }

        },
        data() {
            return {
                user: {
                    avatar: null,
                    username: undefined,
                    departmentId: undefined,
                    nickname: undefined,
                    sex: undefined,
                    password: undefined,
                    email: undefined,
                    phoneNumber: undefined,
                    birth: null,
                },
                //控制弹出框显示和隐藏
                showDialog: false,
                imagecropperShow: false,
                imagecropperKey: 0,
                image: 'https://wpimg.wallstcn.com/577965b9-bb9e-4e02-9f0c-095b41417191',
                rules: {
                    username: [{
                        required: true,
                        message: '请输入用户名',
                        trigger: 'blur'
                    }],
                    departmentId: [{
                        required: true,
                        message: '请选择部门',
                        trigger: 'change'
                    }],
                    nickname: [{
                        required: true,
                        message: '请输入昵称',
                        trigger: 'blur'
                    }],
                    sex: [{
                        required: true,
                        message: '性别不能为空',
                        trigger: 'change'
                    }],
                    password: [{
                        required: true,
                        message: '请输入密码',
                        trigger: 'blur'
                    }],
                    email: [{
                        required: true,
                        message: '请输入邮箱',
                        trigger: 'blur'
                    }],
                    phoneNumber: [{
                        required: true,
                        message: '请输入手机号',
                        trigger: 'blur'
                    }],
                    birth: [{
                        required: true,
                        message: '请选择生日',
                        trigger: 'change'
                    }],
                },
                field101Action: 'https://jsonplaceholder.typicode.com/posts/',
                field101fileList: [],
                sexOptions: [{
                    "label": "男",
                    "value": 0
                }, {
                    "label": "女",
                    "value": 1
                }],
            }
        },
        computed: {},
        created() {},
        mounted() {},
        methods: {
            onOpen() {},
            onClose() {
                this.$refs['elForm'].resetFields()
                this.$emit('changeShow','false')
            },
            close() {
                this.$emit('update:visible', false)
            },
            handelConfirm() {
                this.$refs['elForm'].validate(valid => {
                    if (!valid) {
                        return
                    }
                    console.log(this.user)
                    this.addUser()
                })
            },
            field101BeforeUpload(file) {
                let isRightSize = file.size / 1024 / 1024 < 2
                if (!isRightSize) {
                    this.$message.error('文件大小超过 2MB')
                }
                return isRightSize
            },
            //弹出框关闭后触发
            handleClose(){
                //子组件调用父组件方法并传递参数
                this.$emit('changeShow','false')
            },
            //上传成功后的回调函数
            cropSuccess(data) {
                console.log(data)
                var oldImg = this.image;
                this.imagecropperShow = false
                this.user.avatar = this.image = data.data.url;
                //上传成功之后，重新打开上传组件时初始化组件，否则显示上一次的上传结果
                this.imagecropperKey = this.imagecropperKey + 1
                //上传成功之后还要删除原来的图片
                this.deleteAvatar(oldImg);
            },
            //关闭上传组件
            closeImage() {
                this.imagecropperShow = false
                //上传失败后，重新打开上传组件时初始化组件，否则显示上一次的上传结果
                this.imagecropperKey = this.imagecropperKey + 1
            },
            //删除上传前的图片
            async deleteAvatar(oldImg){
                const {data} = await deleteImgFile(oldImg)
                console.log(data)
            },
            async addUser () {
                const { data: res } = await saveUser(this.user)
                if (res.code == 200) {
                    this.$notify.success({
                        title: '操作成功',
                        message: '用户添加成功',
                    })
                    //关闭
                    this.$emit('changeShow', 'false')
                    this.user = {}
                    //this.$parent.getUserList();
                    this.$emit('getUserList');
                    this.$emit('getDeptAndCount');
                    //this.$parent.getDeptAndCount();
                } else {
                    return this.$message.error('用户添加失败:' + res.message)
                }
            }
        },
        watch:{
            //监听addOrUpdateVisible改变
            addOrUpdateVisible(oldVal,newVal){
                this.showDialog = this.addOrUpdateVisible
            }
        }
    }

</script>
<style>
  .el-upload__tip {
    line-height: 1.2;
  }

</style>
